
import { Tabbar } from '@nutui/nutui-react'
import { TabbarList }  from '@/config/config'
import './styles/Tab.less'
import { useLocation , useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';

const tabPath = TabbarList.map((i:TabbarInfo) => i.route)

const Tab = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [ isVisible, setIsVisible ] = useState(true)
  const location = useLocation();
  const navigate = useNavigate()

  const changeToImg = (icon : any ,icona :any , route: string)=>{
    if(location.pathname === route){
      return <img src={icona} className='tabicon' alt="" />
    }
    return <img src={icon} className='tabicon' alt="" />
  }

  useEffect(()=>{
    if(tabPath.includes(location.pathname)){
      setIsVisible(true)
    }else{
      setIsVisible(false)
    }
  },[location.pathname])

  return  (
    isVisible ? <Tabbar  fixed value={activeIndex} onSwitch={(value) => {
      setActiveIndex(value)
      navigate(TabbarList[value].route)
    }}>
      {
          TabbarList.map((item:TabbarInfo)=>{
            return (
              <Tabbar.Item
                icon={changeToImg(item.icon,item.icona,item.route)}
                key={item.route}
                title={item.title}
              />
            )
          })
      }
    </Tabbar>
    : <></>
  )
}

export default Tab